<template>
  <div>
    <Row>
      <Form label-position="right" :label-width="90">
        <i-col :span="4">
          <FormItem label="装载种类">
            <Select v-model="tabParam.isContainer" filterable placeholder="请选择集装箱种类" style="width: 200px">
              <Option v-for="item in queryForm" :value="item.isContainer" :key="item.isContainer">{{ item.truckTypeName }}</Option>
            </Select>
          </FormItem>
        </i-col>
      </Form>
    </Row>
    <tablePage ref="inspectionTab" :api="queryFleetOrderListByPage" :param="tabParam" sort-name="create_time"
               sort-type="desc" :isStartLoad="true">
      <template slot-scope="props">
        <Table :columns="fleetListColumn" :data="props.data" @on-sort-change="props.sortChange" border></Table>
      </template>
    </tablePage>

    <xlinkModal v-model="operatModal.viewDetailShow" title="查看详情" width="1200">
      <viewFleetOrderDetail v-if="operatModal.viewDetailShow"
                            :currentMainOrder="mainOrderCurrentRow"></viewFleetOrderDetail>
    </xlinkModal>
    <xlinkModal v-model="operatModal.fleetDispatchShow" title="派单" width="1100">
      <fleetDispatch v-if="operatModal.fleetDispatchShow" :currentMainOrder="mainOrderCurrentRow"></fleetDispatch>
    </xlinkModal>

  </div>
</template>

<script>
  import tablePage from '@components/table/tablePage.vue'
  import {queryFleetOrderListByPage} from '@api/backEnd/fleetOrder/index'
  import xlinkModal from '@components/modal/xlinkModal'
  import viewFleetOrderDetail from './components/viewFleetOrderDetail'
  import fleetDispatch from './components/fleetDispatch1'

  export default {
    name: 'orderListInspection',
    data () {
      let mainOrderCurrentRow = {}
      let operatModal = {
        viewDetailShow: false,
        fleetDispatchShow: false,
        sendNoticeShow: false,
        assignmentOrderShow: false,
        dispatchDriverShow: false,
        viewDetailForFleetShow: false
      }
      let queryForm = [
        {'isContainer': '', 'truckTypeName': '全部'},
        {'isContainer': 1, 'truckTypeName': '集装箱'},
        {'isContainer': 0, 'truckTypeName': '整车运输'}
      ]
      /* 未完成 */
      let fleetListColumn = [
        {
          title: '联运单号',
          key: 'mainOrderNo',
          width: 200
        },
        {
          title: '派单机构',
          key: 'dispatchOrgName',
          width: 100
        },
        {
          title: '派单时间',
          key: 'dispatchOrgName',
          width: 150,
          render: (h, params) => {
            return (<span>{params.row.createTime}</span>)
          }
        },
        {
          title: '对位股道',
          width: 100,
          render: (h, params) => {
            return (<span>{params.row.paraPositionTrack}</span>)
          }
        },
        {
          title: '对位时间',
          width: 150,
          render: (h, params) => {
            return (<span>{params.row.paraPositionTime}</span>)
          }
        },
        {
          title: '发站名称',
          key: 'startStationName',
          width: 100
        },
        {
          title: '到站名称',
          key: 'endStationName',
          width: 100
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          minWidth: 200,
          render: (h, params) => {
            let ward = '派单'
            if (params.row.orderNotDispatch > 0) {
              ward = '已未指定派单'
            }
            if (params.row.orderDriverDispatch > 0) {
              ward = '已指定司机派单'
            }
            let viewDetailBtn = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.viewDetailAction(params.row)}>查看详情</i-button>)
            let fleetSendSingleBtn = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.fleetDispatchAction(params.row)}>{ward}</i-button>)
            let btnArray = []
            powerUtil.contains('viewDetail') && btnArray.push(viewDetailBtn)
            powerUtil.contains('orderListUnfinishedFleet') && btnArray.push(fleetSendSingleBtn)
            return (btnArray)
          }
        }
      ]
      let tabParam = {}
      let datas = {
        queryForm,
        queryFleetOrderListByPage,
        tabParam,
        fleetListColumn,
        operatModal,
        mainOrderCurrentRow
      }
      return datas
    },
    computed: {},
    methods: {
      viewDetailAction (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.viewDetailShow = true
      },
      viewDetailFinishAction (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.finishViewDetailShow = true
      },
      fleetDispatchAction (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.fleetDispatchShow = true
      }
      // refresh () {
      //   this.queryFleetOrderListByPage().then(() => {
      //     console.log('刷新成功')
      //   })
      // }
    },
    created () {
    },
    mounted () {
    },
    watch: {
      tabParam: {
        handler: function (val, oldVal) {
          this.$refs['inspectionTab'].dataRefresh()
        },
        deep: true
      }
    },
    components: {
      tablePage, xlinkModal, viewFleetOrderDetail, fleetDispatch
    }
  }
</script>

<style scoped>

</style>
